<template>
  <div class="U000025-template1" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <!--幸运大抽奖静态-->
    <div class="lottery-box">
      <div class="title" v-if="datas.lottery && datas.lottery.name">抽奖活动: {{datas.lottery.name}}</div>
      <div class="priceChanceBtn">
        您有xx次抽奖机会
      </div>
      <img :src="lotteryImage" alt="">
      <div class="point">我的XX: xx</div>
      <div class="reword">我的中奖纪录</div>
    </div>


  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	import lotteryBgImage from '@/resource/images/lottery-bg.png';
	import lotteryImage from '@/resource/images/lottery.png';

	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				font_size,
				font_color,
				class_font_size,
				class_font_color,
				class_bg_color,
				class_border_radius,
			} = this.datas;

			return `
        .component-${this.id} .lottery-box {
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2? preview_color.image || emptyImage: ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .component-${this.id} .point{
            font-size: ${font_size}px;
            color: ${font_color};
        }

        .component-${this.id}  .title {
            font-size: 16px;
            color: ${font_color};
        }

        .component-${this.id} .reword{
            background-color: ${class_bg_color};
            border-radius: ${class_border_radius}px;
            font-size: ${class_font_size}px;
            color: ${class_font_color};
        }
    `;
    }
	};

	export default {
		props: ['id', 'datas', 'styles'],
		data() {
			return{
				emptyImage,
				lotteryBgImage,
				lotteryImage,
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
		watch: {},

		methods: {},

	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .lottery-box {
    width: 100%;
    /*height: 420px;*/
    padding: 20px;
    text-align: center;
    img {
      width: 100%;
    }
    .point {
      margin: 15px;
    }
    .reword {
      width: 40%;
      margin: 0 auto;
      padding: 5px;
    }

    .priceChanceBtn {
      width: 70%;
      margin: 10px auto;
      height: 35px;
      border-radius: 20px;
      background-color: #ff9600;
      line-height: 35px;
      font-size: 17px;
      color: #fff;
      text-align: center;
    }
  }
</style>
